<style scoped>
.cartlist a{
    display: block;
    padding:12px;
    box-sizing: border-box;
    border-bottom:1px solid #e9e9e9;
}

.cartlist a img{
    display: block;
    width:100px;
    height:100px;
    float: left;
    margin-right:10px;
}

.cartlist a div.r{
    width:calc( 100% - 110px );
    float: left;
}

.cartlist a div.r p.title{
    color:#5D656B;
    font-size:14px;
}

.cartlist a div.r p.price{
    color:#EB5221;
}

.btnbox{
    margin-top:10px;
    text-align: right;
}

.btnbox a {
    display: inline-block;
    height:30px;
    line-height:30px;
    border-radius: 15px;
    text-align:center;
    margin-right:15px;
}

.btnbox a.clear{
    width:100px;
    border:1px solid #5D656B;
    color:#5D656B;
}

.btnbox a.pay{
    padding:0px 15px;
    background-color: #EB5221;
    color:#FFF;
}

div.empty div.ww{
    height:200px;
}

div.empty .imgbox{
    margin:0 auto;
    width:150px;
    height:150px;
    border-radius: 75px;
    background-color: #CCC;
    background-repeat: no-repeat;
    background-image: url(../assets/cart_empty.png);
    background-size:100px;
    background-position:center;
}

div.empty p{
    color:#5D656B;
    text-align: center;
    margin-top: 10px;
}

div.empty a{
    margin:20px auto;
    width:100px;
    height:30px;
    line-height:30px;
    border:1px solid #5D656B;
    border-radius: 5px;
    text-align: center;
    display: block;
}

</style>
<template>
    <div>
        <div class="cartlist" v-if="cart.length!==0">
            <router-link v-for="item in cart" :key="item.id" :to="'/mlapp/detail/'+item.id">
                <img :src="item.img" alt="">
                <div class="r">
                    <p class="title">{{item.name}}</p>
                    <p class="price">￥{{item.price}}</p>
                </div>
                <div class="cb"></div>
            </router-link>
        </div>
        <div class="btnbox" v-if="cart.length!==0">
            <a href="javascript:;" class="clear" @click="clearCart">清空购物车</a>
            <a href="javascript:;" class="pay" @click="payHandle">付款，共计￥{{count}}</a>
        </div>
        <div class="empty" v-if="cart.length===0">
            <div class="ww"></div>
            <div class="imgbox"></div>
            <p>然而，购物车里啥都没有</p>
            <router-link to="/mlapp">去逛逛</router-link>
        </div>
    </div>
</template>
<script>
import {mapState} from 'vuex';
export default {
    methods:{
        clearCart(){
            this.$store.commit('clearCart');
        },
        payHandle(){
            this.$store.commit('addOrder',{
                id:Math.floor(Math.random() * (100001) ),
                count:this.count,
                goods:this.cart
            });
            this.$store.commit('clearCart');
            this.$router.push('/mlapp/order');
        }
    },
    computed:{
        count(){
            let num=0;
            for (let item of this.cart){
                num+=item.price
            }
            return num
        },
        ...mapState(['cart'])
    }
}
</script>

